<!-- 时间选择组件下面的时间选择 -->
<template>
	<view class="timeSelect">
		<view class="timeSelect-left">
			<scroll-view :style="{
				height: scrollHeight*2+'rpx'
			}" :scroll-top="top" scroll-y="true" class="scroll-Y"
				@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
				<view class="time1">
					<view class="placeholder" :style="{
						height: (scrollHeight-20)+'rpx'
					}"></view>
					<view :class="{
						'item1':true,
						'item':res.status
					}" v-for="res in hour">
						{{res.value}}
					</view>
					<view class="placeholder" :style="{
						height: (scrollHeight-40)+'rpx'
					}"></view>

				</view>
			</scroll-view>

			<view class="position"></view>
		</view>
		<view class="timeSelect-right">
			<scroll-view :style="{
				height: scrollHeight*2+'rpx'
			}" :scroll-top="top2" scroll-y="true" class="scroll-Y"
				@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll2">
				<view class="time2">
					<view class="placeholder" :style="{
						height: (scrollHeight-20)+'rpx'
					}"></view>
					<view id="demo1" :class="{
						'item1':true,
						'item':res.status
					}" v-for="res in minute">
						{{res.value}}
					</view>
					<view class="placeholder" :style="{
						height: (scrollHeight-40)+'rpx'
					}"></view>

				</view>

			</scroll-view>

			<view class="position"></view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			popHeight: {
				type: Number,
				default: 0
			},
			change:{
				type:Function,
				default:()=>{}
			},
			
			/**
			 * 显示时间
			 */
			time:{
				type: String,
				default: ''
			}

		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},

				hour: [], //时
				minute: [], // 分

				top: 0, // ding
				top2: 0, // ding
				
				hourNum:'00', // 时
				minuteNum:'00', // 分
				
				
				scrollHeight: 0, // 滚动高度

			};
		},
		created() {
			
			this.scrollHeight = this.popHeight*0.8-121
			
			
			for (let i = 0; i < 24; i++) {
				this.hour.push({
					value: i > 9 ? i : '0' + String(i),
					status: false
				})
			}

			for (let i = 0; i < 12; i++) {
				this.minute.push({
					value: i > 1 ? i*5 : '0' + String(i*5),
					status: false
				})
			}
			
			this.hour[0].status = true
			this.minute[0].status = true
			
			this.$emit('change', this.time ? this.time: '00:00')
		},
		watch: {
			hourNum(val){
				this.$emit('change',this.hourNum+':'+this.minuteNum)
				
			},
			minuteNum(val){
				this.$emit('change',this.hourNum+':'+this.minuteNum)
			},
			
			popHeight(val){
				this.scrollHeight = this.popHeight*0.8-121
			}
		},
		methods: {
			scroll: function(e) {
				let s1 = Math.trunc((e.detail.scrollTop - (this.scrollHeight/2-30) + (this.scrollHeight - 40) / 2) / 40)
				
				if (this.top !== s1  && s1>=Number(this.hour[0].value) && s1 <=Number(this.hour[this.hour.length-1].value)) {
					
					this.top = s1*40

					this.hour.forEach((res, index) => {
						if (s1 === index) {
							this.hour[index].status = true
							this.hourNum = this.hour[index].value
						} else {
							this.hour[index].status = false
						}
					})

				}
			},
			scroll2: function(e) {
				let s1 = Math.trunc((e.detail.scrollTop - (this.scrollHeight/2-30) + (this.scrollHeight - 40) / 2) / 40)

				if (this.top2 !== s1 && s1>=Number(this.minute[0].value) && s1 <=Number(this.minute[this.minute.length-1].value)) {
					this.top2 = s1*40

					this.minute.forEach((res, index) => {
						if (s1 === index) {
							this.minute[index].status = true
							this.minuteNum = this.minute[index].value
						} else {
							this.minute[index].status = false
						}

					})

				}

			},
			upper: function(e) {
				console.log(e, '1’')
			},
			lower: function(e) {
				console.log(e, '2’')
			},
		}
	}
</script>

<style lang="less" scoped>
	.timeSelect {
		#flex(-, start, center);

		.timeSelect-left {
			width: 50%;
		}

		.timeSelect-right {
			width: 50%;
		}

		// 选中的框
		.timeSelect-left,
		.timeSelect-right {
			position: relative;

			.position {
				position: absolute;
				width: 100%;
				height: 80rpx;
				top: 50%;
				margin-top: -40rpx;
				border-top: 2rpx solid #ebedf0;
				border-bottom: 2rpx solid #ebedf0;
			}

			.item1 {
				height: 80rpx;
				#flex(-,center,center);
				#font(30rpx,#999);
			}
			.item {
				#font(36rpx, #323233);
				color: #323233 !important;
			}
		}
	}
</style>